<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<!-- JS普通方式引入 -->
<!-- <script type="text/javascript" src="../module/1.js"></script>
<script>
    console.log(a);
</script> -->

<body>
    <!-- 
    ES6 模块
    历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

    // 在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

    模块化的目的:
    1. 将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来 (按功能划分,拆分为独立的模块 => 按需引入)
    2. 减少全局变量的使用
    3. 代码复用
    4. 按需暴露(export)  按需引入(import)


    ES6 模块化
    1. 一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取
    2. 如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量

    模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

-->
</body>


<!-- 模块化方式引入: -->
<!-- (1) script直接引入外部模块 -> 无法在其他模块中使用当前模块中的变量和方法 -->
<!-- <script type="module" src="../module/1.js"></script>
<script>
    console.log(a);
</script> -->

<!-- (2) 在script内通过import关键词引入 -->
<script type="module">
    // import命令用于输入其他模块提供的功能

    // a. 只是引入并执行模块中的代码 -> 并没有接收模块提供的的变量和方法 (类似:script直接引入外部模块)
    // import "../module/1.js";
    // import "../module/2.js";

    // b. 按需引入   => 引入并接收其他模块中提供的的变量和方法
    import { a, addA, reduceA, getA } from "../module/1.js";
    import { b, addB, reduceB } from "../module/2.js";
    import { c, getC } from "../module/3.js";
    console.log(a, b, c);

    addA();
    addA();
    addA();
    addA();
    console.log(a);

    addB();
    addB();
    addB();
    addB();
    console.log(b);

    console.log(getC());




</script>




</html>